<style>
    .xp-wrap {
        background-color: white;
        padding: 10px;
    }

    .xp-items {
        padding: 10px 10px 20px;
        background-color: #f4f4f4;
        color: #444;
        border-color: #ddd;
        margin: 10px;
        cursor: pointer;
        display: block;
        height: 115px;
        overflow: hidden;
        line-height: 22px;
        text-overflow: ellipsis;
    }

    .xp-items .title {
        font-size: 16px;
        font-weight: bold;
        width: 90%;
        text-align: left;

    }
</style>
<div class="xc-detailpage-div xp-wrap">
    {foreach name="groups" item="group"}
    <div class="xc-grouptitle">{$group.name|htmlentities}</div>
    <div class="row">
        {foreach name="flows" item="flow"}
        {if $group.id==$flow.xcflow_group_id}
        <div class="col-md-2 col-sm-4 col-xs-6 xp-items btn-createOrUpdateXcformPage" data-id="{$flow.id|htmlentities}" >
            <div class="title">{$flow.name|htmlentities}</div>
            <p>{$flow.desc|htmlentities}</p>
        </div>
        {/if}
        {/foreach}
    </div>
</div>
{/foreach}
</div>